<template>
  <div style="padding: 10px 10px 137px;
    overflow: auto;
    height: 100%;">
    <a-form-model
      :label-col="{ span: 6 }"
      :wrapper-col="{ span: 18 }"
      layout="horizontal"
      :model="config"
    >
      <a-form-model-item label="URL">
        <a-input v-model="tableOptions.url" />
      </a-form-model-item>

      <h5 style="font-size:18px">工具条按钮配置:</h5>
      <tools-config ref="toolsConfig" @change="toolsChange"/>
      <h5 style="font-size:18px">列配置:</h5>
      <column-config ref="columnConfig" @change="columnChange"/>
      <h5 style="font-size:18px">操作按钮配置:</h5>
      <oper-config ref="operConfig" @change="operChange"/>

      <a-form-model-item label="请求方式">
        <a-select v-model="tableOptions.method">
          <a-select-option value="get">
            GET
          </a-select-option>
          <a-select-option value="post">
            POST
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="选择列">
        <a-switch
          checked-children="是"
          un-checked-children="否"
          v-model="tableOptions.showColumns"
        />
      </a-form-model-item>
      <a-form-model-item label="刷新">
        <a-switch
          checked-children="是"
          un-checked-children="否"
          v-model="tableOptions.showRefresh"
        />
      </a-form-model-item>
      <a-form-model-item label="改大小">
        <a-switch
          checked-children="是"
          un-checked-children="否"
          v-model="tableOptions.changeSize"
        />
      </a-form-model-item>
      <a-form-model-item label="复选框">
        <a-switch
          checked-children="是"
          un-checked-children="否"
          v-model="tableOptions.showCheckBox"
        />
      </a-form-model-item>
      <a-form-model-item label="显示序号">
        <a-switch
          checked-children="是"
          un-checked-children="否"
          v-model="tableOptions.showIndex"
        />
      </a-form-model-item>
    </a-form-model>
  </div>
</template>
<script>
import ColumnConfig from './columnConfig.vue'
import OperConfig from './operConfig.vue'
import ToolsConfig from './toolsConfig.vue'
import { deepClone } from '@/utils/tools.js'
export default {
  components: { ColumnConfig, OperConfig, ToolsConfig },
  data() {
    return {
      tableOptions: {
        url: '',
        method: 'get',
        queryParams: {},
        showColumns: true,
        showRefresh: true,
        changeSize: true,
        showCheckBox: false,
        showIndex: true,
        columns: [],
        operate: {}
      },
      toolsArray: []
    }
  },
  watch: {
    tableOptions: {
      handler() {
        this.$emit('tableOptionsChange', this.tableOptions)
      },
      deep: true
    },
    toolsArray: {
      handler() {
        this.$emit('toolsChange', this.toolsArray)
      },
      deep: true
    }
  },
  created() {},
  mounted() {},
  methods: {
    init(tableOptions) {
      this.$refs.columnConfig.init(tableOptions.columns || [])
      this.$refs.operConfig.init(tableOptions.operate || {})
    },
    initTools(toolsArray) {
      this.$refs.toolsConfig.init(toolsArray || [])
    },
    reset() {

    },
    toolsChange(tools) {
      this.toolsArray = deepClone(tools)
    },
    columnChange(items) {
      this.tableOptions.columns = items
      // this.tableOptions = JSON.parse(JSON.stringify(this.tableOptions))
      this.tableOptions = deepClone(this.tableOptions)
    },
    operChange(operate) {
      // console.log('operate', operate)
      if (operate == null) {
        this.tableOptions.operate = {}
      } else {
        this.tableOptions.operate = operate
      }
      this.tableOptions = deepClone(this.tableOptions)
      // this.tableOptions = JSON.parse(JSON.stringify(this.tableOptions))
      // this.$set(this, 'tableOptions', this.tableOptions)
      // console.log('this.tableOptions', this.tableOptions)
    }
  }
}
</script>
<style></style>
